<template>
  <div ref="main" class="l-query2" >
    <el-form 
      :model="formData" 
      size="mini"
      :inline="true" 
      ref="form"
      >
      <input type="text" style="display:none">
      <template v-for="(item,index) in showItems" >
        <el-form-item :label="item.label" :ref="item.prop"  :prop="item.prop" :key="index" >
            <slot :name="item.prop">
              <l-form-item v-model="formData[item.prop]" :formData="formData" :data="item" :key="item.prop"></l-form-item>
            </slot>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button  
          style=" margin-right: 8px" 
          size="mini" 
          type="text" 
          icon="el-icon-arrow-down"
          v-if="showMore" 
          @click="popoverVisible = !popoverVisible" >
            {{popoverVisible?'收起条件':'更多条件'}}
          </el-button>
        <el-button v-if="commonItems.length > 0" style="margin-right:8px;" @click="handleResetClick" size="mini" >重置</el-button>
        <el-dropdown  size="mini" split-button type="primary"  @command="handleCommand" @click="handleSearchClick">
          查询
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="learun-search" divided >自定义</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--<el-button @click="handleSearchClick" size="mini" type="primary" :loading="loading" :style="{width: this.isresize ?'80px':''}"  >查询</el-button>-->
      </el-form-item>
    </el-form>


    <l-drawer
          title="更多条件"
          :width="popoverWidth"

          :showClose="false"
          okBtnLabel="查询"
          v-if="showMore"
          :visible.sync="popoverVisible"

          @ok="handleSearchClick"
          >
      <div class="l-query-popper">
        <el-form 
          :model="formData" 
          size="mini"
          ref="form2"
          :label-width="`${labelWidth}px`"
        >
          <template v-for="(item) in hideItems" >
            <el-col :span="item.span || 24" :key="item.prop">
              <el-form-item :label="item.label" :ref="item.prop"  :prop="item.prop"  >
                  <slot :name="item.prop">
                    <l-form-item v-model="formData[item.prop]" :formData="formData" :data="item" :key="item.prop"></l-form-item>
                  </slot>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </div>
    </l-drawer>


    <l-drawer
          title="自定义条件"
          :width="800"
          :visible.sync="settingVisible"
          okBtnLabel="查询"
          >

          <div class="l-rblock" style="padding:8px;">
            <div class="l-auto-window ">
              <el-tabs v-model="activeTabName" type="card">
                <el-tab-pane class="l-tabs-container" :label="$t('条件设置')" name="tab0">
                  <div class="l-rblock">
                    <el-form size="mini" ref="form" label-width="44px"  >
                      <draggable
                          :list="conditions"
                          :group="{ name: 'dic' }"
                          ghost-class="set-item-ghost"
                          handle=".l-drag-item">
                          <div v-for="(item, index) in conditions"
                              class="l-set-item l-set-item__Num" :key="index">
                              <i class="l-drag-item el-icon-rank"></i>
                              <el-tag type="info" size="medium" effect="plain">{{index + 1}}</el-tag>
                              <l-select
                                  style="width:240px;margin-right:4px;"
                                  size="mini"
                                  v-model="item.prop"
                                  :options="items"
                                  valueKey="prop"
                                  placeholder="字段"
                                  
                                  ></l-select>
                              <l-select style="width:88px;margin-right:4px;"
                                  size="mini"
                                  v-model="item.symbol"
                                  :placeholder="$t('比较符')"
                                  :options="symbolOptions"
                                  >
                              </l-select>
                              <l-form-item style="width:360px;margin-right:4px;"  v-model="item.value" :data="item"></l-form-item>
                              <el-button 
                                  @click="handleRemoveConditions(index)"
                                  circle
                                  plain
                                  type="danger"
                                  size="mini"
                                  icon="el-icon-minus"
                                  class="l-delete-item"
                                  style="padding: 4px;"></el-button>
                          </div>
                      </draggable>
                      <div style="padding-left:22px;" >
                          <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddConditions"  >添加条件</el-button>
                      </div>
                      <el-form-item label="公式">
                        <el-input v-model="formula" placeholder="请输入公式,默认为 1 and 2 and 3 这种且方式">
                            <el-popover
                                slot="append"
                                placement="bottom"
                                width="240"
                                trigger="hover">

                                <div class="l-info-message">
                                    <p>请按如下规则编辑条件组合</p>
                                    <p class="ok">(1 and 2) or (3 and 4) <i class="fa fa-check"></i></p>
                                    <p>1.有and和or必须加括号</p>
                                    <p class="error">1 and 2 or 3 and 4 <i class="fa fa-close"></i></p>
                                    <p>2.一个括号里不能同时出现and和or</p>
                                    <p class="error">(1 and 2 or 3 )and 4 <i class="fa fa-close"></i></p>
                                    <p>3.不允许出现不存在的编号</p>
                                    <p class="error">1 and 2 and 3 and 4 and 5 <i class="fa fa-close"></i></p>
                                    <p>4.括号都是成对出现的</p>
                                    <p class="error">(1 and 2 and 3 and 4 <i class="fa fa-close"></i></p>
                                </div>    
                                <el-button  slot="reference" icon="el-icon-question"></el-button>
                            </el-popover>
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-tab-pane>
                <el-tab-pane class="l-tabs-container" :label="$t('常用查询')" name="tab2">
                  <div class="l-rblock">
                      <l-table 
                          :columns="commonColumns" 
                          :dataSource="commonItems" 
                          :isSortable="true"
                          rowKey="prop"
                          :isShowNum="false"
                          >
                          <el-table-column align="center" width="80" >
                            <template slot-scope="scope">
                                <button 
                                    style="color: #f56c6c;"
                                    type="button" 
                                    @click.stop="handleProgrammeDelete(scope.$index, scope.row)"
                                    class="el-button el-button--text el-button--mini">
                                    加载
                                </button>
                                <button
                                    type="button" 
                                    @click.stop="handleProgrammeDelete(scope.$index, scope.row)"
                                    class="el-button el-button--text el-button--mini">
                                    删除
                                </button>
                            </template>
                          </el-table-column>
                      </l-table>
                  </div>
                </el-tab-pane>
                <el-tab-pane class="l-tabs-container" :label="$t('查询方案')" name="tab1">
                  <div class="l-rblock">
                      <l-table 
                          :columns="programmeColumns" 
                          :dataSource="[]" 
                          :isSortable="true"
                          rowKey="prop"
                          :isShowNum="false"
                          >
                          <el-table-column align="center" width="80" >
                            <template slot-scope="scope">
                                <button 
                                    style="color: #f56c6c;"
                                    type="button" 
                                    @click.stop="handleProgrammeDelete(scope.$index, scope.row)"
                                    class="el-button el-button--text el-button--mini">
                                    加载
                                </button>
                                <button
                                    type="button" 
                                    @click.stop="handleProgrammeDelete(scope.$index, scope.row)"
                                    class="el-button el-button--text el-button--mini">
                                    删除
                                </button>
                            </template>
                        </el-table-column>
                      </l-table>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <template #btns>
            <el-button size="mini" type="success" @click="handleSaveProgramme" >保存方案</el-button>
          </template>


    </l-drawer>


  </div>
</template>
<script>
var elementResizeDetectorMaker = require("element-resize-detector")
export default {
  name:'l-query2',
  props: {
      labelWidth:{
        type:Number,
        default:120
      },
      popoverWidth:{
        type:Number,
        default:600
      },
      items:{
          type:Array,
          default:()=>[]
      },
      formData:{
        type:Object,
        default:()=>{}
      },
      loading:{
        type:Boolean,
        default:false
      }
  },
  data () {
    return {
      showNum:this.items.length,
      erdUltraFast:null,
      isresize:false,
      showMore:false,
      popoverVisible:false,
      formDataInit:this.$deepClone(this.formData),

      settingVisible:false,
      activeTabName:'tab0',
      conditions:[],
      formula:'',
      symbolOptions:[
        { value: 1, label: '等于' }, 
        { value: 2, label: '大于' }, 
        { value: 3, label: '大于等于' }, 
        { value: 4, label: '小于' },
        { value: 5, label: '小于等于'},
        { value: 6, label: '包含' }, 
        { value: 7, label: '包含于' },
        { value: 8, label: '不等于' },
        { value: 9, label: '不包含' },
        { value: 10, label: '不包含于' }
      ],
      programmeColumns:[
        {label:'名称',prop:'name'}
      ],
      commonColumns:[
        {label:'名称',prop:'label'}
      ],
    }
  },
  mounted () {
    this.$nextTick(()=>{
      this.erdUltraFast = elementResizeDetectorMaker({
        strategy: "scroll" //<- For ultra performance.
      })
      this.erdUltraFast.listenTo(this.$refs.main, ()=> {
        this.dolayout()
      })
    })
  },
  beforeDestroy(){
    this.erdUltraFast.removeAllListeners(this.$refs.main)
    this.erdUltraFast.uninstall(this.$refs.main)
    this.erdUltraFast = null
  },
  computed:{
    commonItems(){
      return this.items.filter(t=>t.isCommon)
    },
    showItems(){
      let len = this.commonItems.length
      if(len <= this.showNum){
        return this.commonItems
      }
      else{
        const list = []
        this.commonItems.forEach((item,index) => {
          if(index < this.showNum){
            list.push(item)
          }
          else{
            return false
          }
        })
        return list
      }
    },
    hideItems(){
      let len = this.commonItems.length
      if(len <= this.showNum){
        return []
      }
      else{
        const list = []
        this.commonItems.forEach((item,index) => {
          if(index >= this.showNum){
            list.push(item)
          }
        })
        return list
      }
    }
  },
  methods:{
    handleResetClick(){
      for(var id in this.formDataInit){
        this.formData[id] = this.formDataInit[id]
      }
      this.$nextTick(()=>{
        this.handleSearchClick()
      })
    },
    handleSearchClick(){
      this.popoverVisible = false
      this.$emit('search', this.$deepClone(this.formData))
    },
    resize(isLast){
      this.$nextTick(()=>{
        let height = this.$getElemHeight(this.$refs.form.$el)
        if(height > 46 && this.showNum > 0){
          this.showNum--
          this.resize(isLast)
        }
        else{
          if(this.items.length > this.showNum && !isLast ){
            this.showMore = true
            this.resize(true)
          }
          else{
            this.isresize = false
          }
         
        }
      })
    },
    dolayout(){
      this.showNum = this.items.length
      this.popoverVisible = false
      if(!this.isresize){
        this.isresize = true
        this.showMore = false
        this.resize(false)
      }
    },

    /**自定义查询设置 */
    handleCommand(command){
      if(command == 'learun-search'){
        this.settingVisible = true
      }
    },
    handleAddConditions(){
      this.conditions.push({prop:'',symbol:1,value:''})
    },
    handleRemoveConditions(index){
      this.conditions.splice(index,1)
    },
    handleSaveProgramme(){
      if(this.conditions.length == 0){
        this.$message({
          type: 'error',
          message: '请设定条件!'
        })
      }
    }
  }
}
</script>
<style lang="less">
@import './index.less';
</style>
